{% extends "personal_center/base.html" %}

{% block page_link %}
    <script type="text/javascript" src="../../static/personal_center/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" href="../../static/personal_center/css/multiple-select.min.css">
    <link rel="stylesheet" href="../../static/personal_center/css/index.css">
{% endblock %}


{% block style %}
    <style>
        ::-webkit-scrollbar{  width: 6px; height: 6px;}
        ::-webkit-scrollbar-track { background-color: white;}
        ::-webkit-scrollbar-thumb{  border-radius:5px; background-color: #00688B;}

        * {
            margin:0;
            padding:0;
        }

        #YB_mulu div{
            font-size:0;
            overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
        }

        .module1:hover {
            background: #DFDFDF;
        }

        #DB_mulu div{
            font-size:0;
            overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
        }

        .module2:hover {
            background: #DFDFDF;
        }

        #LH_mulu div{
            font-size:0;
            overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
        }

        .module3:hover {
            background: #DFDFDF;
        }

        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .model_li {
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        #addForm {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            display: none;
            z-index: 10100;
            font-size: 0;
        }

        /* 标题 */
        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }

        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }

        .module1 {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .module2 {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .module3 {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_models1" class="shade">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom: #cfcfcf solid 1px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 40px;width: 15%;margin-left: 1%;display: inline-block;">议题上会</h5>
                    <span onclick="close_models()"
                          style="float: right;line-height: 40px;padding-right: 2%;cursor: pointer;"><i
                            class="iconfont icon-quchu"></i></span>
                </div>
                <div style="width: 100%;padding-top: 2%;padding-left: 2%;">
                    <div style="margin-top: 2%;">
                        <label for=""><span style="color: red;">* </span><p style="display: inline-block;letter-spacing: 2px;">开会时间：</p></label>
                        <input style="border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;width: 350px;outline: none;"
                               class="input-style" type="text" name="car_start" id="time_start"
                               placeholder="请选择开会时间" autocomplete="off">
                    </div>

                    <div style="margin-top: 2%;">
                        <label for=""><span style="color: red;">* </span><p style="display: inline-block;letter-spacing: 2px;">会议地点：</p></label>
                        <select name="" id="meeting_root" style="width: 350px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;outline: none;">
                            <option value="行政楼七楼大会议室">行政楼七楼大会议室</option>
                            <option value="内科楼十楼会议室">内科楼十楼会议室</option>
                            <option value="党员活动室">党员活动室</option>
                            <option value="小会议室">小会议室</option>
                        </select>
                    </div>

                    <div style="margin-top: 2%;">
                        <label for=""><span style="color: red;">* </span>主&nbsp;&nbsp;持&nbsp;&nbsp;人：</label>
                        <select name="" id="ConferenceHost" style="width: 350px;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;padding-right: 1px;outline: none;">
                            <option value="0">请选择会议主持人</option>
                            {% for leader in leader_obj %}
                                <option value="{{ leader.id }}">{{ leader.real_name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div style="margin-top: 2%;">
                        <label for=""><span style="color: red;">* </span><p style="display: inline-block;letter-spacing: 2px;">短信通知：</p></label>
                        <input type="radio" name="notification" value="1" checked> 是
                        <input type="radio" name="notification" value="0" style="margin-left: 15px;"> 否
                    </div>

                </div>
                <div style="width: 100%;height: 40px;text-align: right;padding-right: 2%;margin-top: 2%;border-top: #cfcfcf solid 1px;">
                    <button id="iss_summit_but" style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 5px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 20%;height: 96%;margin-top: 1%;display: inline-block;vertical-align: top;margin-left: 1%;background-color: white;border: #cfcfcf solid 1px;">
        {% for nav,nav_data in LeftNavigation.items %}
            <div style="width: 100%;height: 40px;padding-left: 10px;line-height: 40px;border-bottom: #cfcfcf dashed 1px;cursor: pointer;" onclick="open_nav('{{ nav_data.key }}')">
                {{ nav }}
            </div>
            <div class="nav_list" style="width: 100%;border-bottom: #cfcfcf dashed 1px;display: none;" id="{{ nav_data.key }}">
                {% for datum in nav_data.date %}
                    <div style="padding-left: 30px;width: 100%;border-bottom: #cfcfcf dashed 1px;height: 40px;line-height: 40px;cursor: pointer;" onclick="search_topic('{{ datum.id }}', '{{ datum.name }}')">
                        {{ datum.name }}
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>

    <div id="my_application" style="width: 75%;height: 96%;margin-top: 1%;display: inline-block;vertical-align: top;margin-left: 1%;background-color: white;letter-spacing: 0;border: #cfcfcf solid 1px;">
        <div style="width: 100%;height: 94%;">
            <div id="YB_mulu" style="width: 100%;height: 100%;overflow: auto;margin-top: 5px;"><!--startprint-->
                <div id="container" style="width: 100%;font-size: 0;padding: 0;margin: 0;">
                    <div style="width: 100%;height: 40px;">
                        <div style="width: 100%;height: 100%;line-height: 40px;border-bottom: #999999 solid 1px;text-align: center;">
                            <strong id="committee_title" style="font-size: 20px;"></strong>
                            <button id="AttendMeeting" onclick="will_fun()" style="width: 100px;height: 30px;margin-top: 5px;border-radius: 3px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;letter-spacing: 5px;float: right;margin-right: 15px;font-size: 14px;line-height: 0;display: none;">上会</button>
                        </div>
                    </div>

                    <div style="width: 100%;height: 40px;">
                        <div style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;border-left: none;"></div>
                        <div style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">
                            <input id="yb_qx" onclick="check_all_select(this.id)" type="checkbox" style="margin-top: 3px;">
                        </div>
                        <div style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">序号</div>
                        <div style="width: 34%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">议题名称</div>
                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">议题编号</div>
                        <div style="width: 10%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">提交人</div>
                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">提交时间</div>
                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">审核时间</div>
                        <div style="width: 8%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;border-right: none;">操作</div>
                    </div>

                    <div style="width: 100%;" id="topic_list">

                    </div>
                </div><!--endprint-->
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personal_center/js/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script type="text/javascript" src="../../static/personal_center/js/multiple-select.min.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("supervision_inspection_management").className = "add-nav-active";
        };

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#time_start' //指定元素
        });

        function open_nav(nav_id) {
            var nav_list = document.getElementsByClassName("nav_list");
            for (var i=0; i<nav_list.length; i++) {
                nav_list[i].style.display = "nome"
            }
            if (document.getElementById(nav_id).style.display === "none") {
                document.getElementById(nav_id).style.display = "block";
            }else {
                document.getElementById(nav_id).style.display = "none";
            }
        }

        function search_topic(committee_id, committee_name) {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/supervision-inspection/list_of_Issues.html");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("committee_id="+committee_id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200){
                            document.getElementById("topic_list").innerHTML = "";
                            document.getElementById("committee_title").innerText = committee_name;
                            document.getElementById("AttendMeeting").style.display = "block";
                            for (var i=0; i<JsonDate["data"].length; i++) {
                                console.log("======================", JsonDate["data"][i])
                                var html_str = `
                                    <div class="module1" style="width: 100%;">
                                        <div style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;cursor: move;border-left: none;">
                                            <i style="font-size: 14px;" class="gm-icon gm-icon-move"></i>
                                        </div>
                                        <div style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">
                                            <input type="checkbox" class="check-box" id="`+JsonDate["data"][i]["id"]+`" style="margin-top: 3px;">
                                        </div>
                                        <div class="YbSerial" style="width: 3%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">`+JsonDate["data"][i]["serial"]+`</div>
                                        <div style="width: 34%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;padding-left: 3px;" title="`+JsonDate["data"][i]["topic_name"]+`"><a href="committee_topics_detail.html?id=`+JsonDate["data"][i]["id"]+`">`+JsonDate["data"][i]["topic_name"]+`</a></div>
                                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;" title="`+JsonDate["data"][i]["number"]+`">`+JsonDate["data"][i]["number"]+`</div>
                                        <div style="width: 10%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">`+JsonDate["data"][i]["apply_user"]+`</div>
                                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">`+JsonDate["data"][i]["create_time"]+`</div>
                                        <div style="width: 13%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;">`+JsonDate["data"][i]["appove_time"]+`</div>
                                        <div style="width: 8%;height: 40px;line-height: 40px;border: #999999 solid 1px;border-top: none;border-left: none;text-align: center;color: #0b0b0b;display: inline-block;vertical-align: top;font-size: 14px;border-right: none;">
                                            <a href="committee_topics_detail.html?id=`+JsonDate["data"][i]["id"]+`">查看</a>
                                        </div>
                                    </div>
                                `
                                $("#topic_list").append(html_str)
                            }
                        }else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
             };
        }

        function check_all_select(chose_id) {
            var check_box_list = document.getElementsByClassName("check-box");
            if (document.getElementById(chose_id).checked){
                for (var i=0; i<check_box_list.length; i++){
                    check_box_list[i].checked=true;
                }
            }else {
                for (var t=0; t<check_box_list.length; t++){
                    check_box_list[t].checked=false;
                }
            }
        }

        function online_tag(iss_id_list) {
            document.getElementById("new_models1").style.display = "table-row";
            document.getElementById("iss_summit_but").setAttribute("onclick", "will_meeting(" + JSON.stringify(iss_id_list) + ")")
        }

        function close_models() {
            document.getElementById("new_models1").style.display = "none";
        }

        function will_fun() {
            var iss_id_list = [];
            var check_box_list = document.getElementsByClassName("check-box");
            for (var i=0; i<check_box_list.length; i++){
                if (check_box_list[i].checked){
                    iss_id_list.push(check_box_list[i].id);
                }
            }

            if (iss_id_list.length === 0){
                document.getElementById("loading").style.display = "none";
                alert("请选择议题！");
                return false
            }
            online_tag(iss_id_list)
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function will_meeting(iss_id_list) {
            var meeting_time = document.getElementById("time_start").value;
            var meeting_adress =  $('#meeting_root option:selected').val();
            var notification = $("input[type=radio][name=notification]:checked").val();
            var ConferenceHost = document.getElementById("ConferenceHost").value;
            if (ConferenceHost === '0') {
                alert("请选择会议主持人！");
                return false
            }
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();

            xhr.open('post', "/supervision-inspection/the_agenda_meeting.html", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("notification="+String(notification)+"&meeting_adress="+String(meeting_adress)+"&meeting_time="+String(meeting_time)+"&id_list="+JSON.stringify(iss_id_list)+"&ConferenceHost="+String(ConferenceHost));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        alert("文件已发送至领导处！");
                        close_models();
                        location.reload();
                    }
                }
             };
        }
    </script>
{% endblock %}
